<template>
  <div class="box">
    <div class="conent">
      <h4>登入</h4>
      <div>
        <input type="text" v-model="username" placeholder="请输入账号">
      </div>
      <div>
        <input type="password" v-model="password" placeholder="请输入密码">
      </div>
      <button @click="gohome">登入</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
Vue.use(Toast)
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  mounted () {
    // const flag = localStorage.getItem('token') || false
    // if (flag) {
    //   this.$router.push('/home')
    // }
  }
  ,
  methods: {
    gohome () {
      if (this.username != '' && this.password) {
        axios.post('/api/IntelligentAgriculture/loginController/login', { "username": this.username, "password": this.password }).then(res => {
          if(res.data.code !== 1001) {
            localStorage.setItem('token', res.data.data.token)
            this.$router.push('/home')
          } else {
            Toast('用户名或者密码错误')
          }
        })
      } else {
        Toast('请填写完整信息')
      }
      // if (this.username ==='admin' && this.password ==='admin.123123') {
      //   localStorage.setItem('user', this.username)
      //   this.$router.push('/home')
      // } else {
      //   Toast('请填写正确的账号或密码')
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
  .box {
    height: 100%;
    .conent {
      position: relative;
      width: 90%;
      height: 800px;
      background: #fff;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 10%;
      h4 {
        text-align: center;
        padding: 50px 0;
        font-size: 40px;
        color: rgb(168, 167, 167);
      }
      input {
        border: none;
        width: 80%;
        height: 60px;
        border: 1px solid rgb(168, 167, 167);
        border-radius: 10px;
        padding: 20px;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        margin: 0 0 50px 0;
        font-size: 30px;
      }
      button {
        border: none;
        background: #999;
        color: #fff;
        width: 88%;
        height: 100px;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        margin: 0 0 50px 0;
        border-radius: 15px;
        font-size: 30px;
      }
    }
  }
</style>
